<template>
  <div id="app">
    <router-view />
    <audio-play @error="handlerError" @ended="nextSong" @loadedmetadata="handler" :currentTime="currentTime"
      @timeupdate="timeupdate" :src="currentUrl" :paused="songList.isPaused"></audio-play>
    <van-action-sheet v-model="$store.state.songList.show" title="播放列表">
      <div class="content">
        <song-item v-for="item in $store.state.songList.list" :key="item.id" :song="item" @click="playSong">
          <template #icon>
            <van-icon name="pause-circle-o"
              v-show="item.id == $store.state.songList.id && !$store.state.songList.isPaused" size="30" />
            <van-icon name="play-circle-o"
              v-show="!(item.id == $store.state.songList.id && !$store.state.songList.isPaused)" size="30" />
          </template>
        </song-item>
      </div>
    </van-action-sheet>
  </div>
</template>
<script>
import { Toast } from 'vant';
import { mapActions, mapState } from 'vuex';
import AudioPlay from './components/public/AudioPlay.vue';
import SongItem from '@/components/public/SongItem.vue';

export default {
  name: 'app',
  components: {
    AudioPlay,
    SongItem,
  },
  data() {
    return {
      currentTime: 0,
      status: false
    };
  },
  created() {
    this.$bus.$on('rangeChange', (time) => {
      this.currentTime = time;
    });
    this.setToken()
  },
  computed: {
    // songList:[],//歌曲列表
    // isPuased:false,
    // volume:0.5,
    // playbackRate:1,
    ...mapState(['songList', 'currentUrl']),
    // song(){
    //   //从列表中查找到对应的歌曲
    //   return this.songList.list.find((song)=>{
    //     return song.id = this.songList.id
    //   })
    // }
  },
  methods: {
    ...mapActions(['nextSong', 'changeSongState', 'toggleSong', 'togglestatus']),
    handler(duration) {
      this.$bus.$emit('load', duration);
    },
    timeupdate(time) {
      this.$bus.$emit('timeupdate', time);
    },
    handlerError() {
      Toast({
        message: '加载出错',
        icon: require('@/assets/loadError.png'),
      });
      this.nextSong();
    },
    playSong(song) {
      if (song.id == this.$store.state.songList.id) {
        this.changeSongState();
      } else {
        this.toggleSong(song.id);
        this.$store.state.songList.isPaused = false;
      }
    },
    setToken() {
      if (JSON.parse(localStorage.getItem('myLogin'))) {
        this.togglestatus()
      }
    }
  },
};
</script>

<style>
.controller {
  background: #fff;
  border-top: 1px solid #ddd;
  padding-bottom: 50px;
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 50px;
}
</style>
